<template>
  <div class="container">
    <h1 style="text-align: center">表格合并</h1>
    <el-table
      :data="tableData"
      :span-method="flag ? fn : arraySpanMethod"
      border
      style="width: 100%"
      @cell-click="cellClick"
      :cell-class-name="tableCellClassName"
    >
      <el-table-column label="金额" width="50">
        <el-table-column label="百万" prop="amount8" width="50">
          <template slot-scope="scope">
            <span v-if="flag">{{ scope.row.amount8 }}</span>
            <el-input
              v-else
              v-model="scope.row.num"
              @blur="handleBlur"
              @input="handleInput"
              @change="handleChange(scope, $event)"
              maxlength="10"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="amount7" width="50" label="十万">
        </el-table-column>
        <el-table-column prop="amount6" width="50" label="万">
        </el-table-column>
        <el-table-column prop="amount5" width="50" label="千">
        </el-table-column>
        <el-table-column prop="amount4" width="50" label="百">
        </el-table-column>
        <el-table-column prop="amount3" width="50" label="十">
        </el-table-column>
        <el-table-column prop="amount2" width="50" label="元">
        </el-table-column>
        <el-table-column prop="amount1" width="50" label="角">
        </el-table-column>
        <el-table-column prop="amount0" width="50" label="分">
        </el-table-column>
      </el-table-column>
      <el-table-column prop="" width="50" label="操作"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { message } from 'element-ui'
export default {
  // name: 'MergeTable',
  data () {
    return {
      tableData: [{
        num: '345',
        amount8: '',
        amount7: '',
        amount6: '',
        amount5: '',
        amount4: '',
        amount3: '',
        amount1: '',
        amount0: ''
      }, {
        num: '567',
        amount8: '',
        amount7: '',
        amount6: '',
        amount5: '',
        amount4: '',
        amount3: '',
        amount1: '',
        amount0: ''
      }
      ],
      flag: true
    }
  },
  computed: {
  },
  methods: {
    tableCellClassName ({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex
      column.index = columnIndex
    },
    handleInput (val) {
      // setTimeout(() => {
      // })
      let pattern = /^(0|[1-9]\d{0,6})(\.\d{1, 2})?$/
      // console.log('pattern: ', pattern)
      if (!pattern.test(val)) return message.warning('只能输入7位整数2位小数')
      // console.log('pattern: ',  pattern.test(val))
      // this.flag = true
    },
    handleBlur (val) {
      // setTimeout(() => {
      // })
      // console.log('pattern: ', pattern)
      this.flag = true
    },

    handleChange (scope, val) {
      const { $index } = scope
      console.log('scope: ', scope)
      console.log('val: ', val)
      console.log('val: ', val.length)
      this.flag = true
      let arr = val.split('')
      console.log('arr: ', arr.length)
      // 没有小数点
      if (arr.some(item => item === '.')) {
        console.log('有小数点')
        let index = val.indexOf('.')
        arr = arr.slice(0, index)
        console.log('arr: ', arr)
        let newVal = val.slice(index + 1)
        console.log('index: ', index)
        console.log('newVal: ', newVal)
        if (newVal.length === 0) {
          arr.push('0')
          arr.push('0')
        } else if (newVal.length === 1) {
          arr.push(newVal.toString())
          arr.push('0')
        } else {
          arr.push((newVal.slice(0, 1)).toString())
          arr.push((newVal.slice(1, 2)).toString())
        }
        console.log('arr: ', arr)

        // return false
        console.log('arr: ', arr)
        let num = 9 - arr.length
        console.log('num: ', num)
        if (num !== 0) {
          for (let i = 0; i < num; i++) {
            arr.unshift('0')
          }
        }
        console.log('arr: ', arr)
        arr.map((item, index) => {
          this.tableData[$index][`amount${arr.length - 1 - index}`] = item
        })
      } else {
        console.log('没有小数点')
        let num = 7 - arr.length
        console.log('num: ', num)
        if (num !== 0) {
          for (let i = 0; i < num; i++) {
            arr.unshift('0')
          }
        }
        console.log('arr: ', arr)
        arr.map((item, index) => {
          this.tableData[$index][`amount${arr.length + 1 - index}`] = item
        })
        this.tableData[$index].amount0 = this.tableData[$index].amount1 = '0'
        console.log('this.tableData: ', this.tableData)
      }
    },
    cellClick (row, column, cell, event) {
      if (!this.flag) return false
      console.log('row: ', row)
      console.log('column: ', column)
      // console.log('cell: ', cell)
      // console.log('event: ', event)
      this.tableData.map(item => {
        // tableData
      })
      // console.log('column: ', column)
      const arr = [
        'amount8',
        'amount7',
        'amount6',
        'amount5',
        'amount4',
        'amount3',
        'amount1',
        'amount0'
      ]
      if (arr.some(item => item === column['property'])) {
        this.flag = false
      }
      // if (column['property'] === 'amount1' || column['property'] === 'amount2' || column['property'] === 'amount3') {
      //   this.flag = false
      // }
    },
    handle () {
      this.flag = false
    },

    fn ({ row, column, rowIndex, columnIndex }) {
      return {
        rowspan: 1,
        colspan: 1
      }
    },
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return [1, 9]
      } else {
        return [0, 0]
      }
    }

    // arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
    //   // console.log('row: ', row)
    //   // console.log('column: ', column)
    //   // console.log('rowIndex: ', rowIndex)
    //   if (columnIndex === 0) {
    //     return {
    //       rowspan: 1,
    //       colspan: 3
    //     }
    //   }
    // }
  }
}
</script>

<style scoped>
</style>
